<!-- 巡检总览-缺陷分析 -->
<template>
  <div style="width: 100%; height: 100%" class="pieview">
    <p>{{ title }}</p>
    <div ref="chartDom" class="echars"></div>
  </div>
</template>
<script>
import { px } from '@/utils/utils';
export default {
  props: ['title'],
  data() {
    return {
      chartInstance: null
    };
  },
  mounted() {
    // eslint-disable-next-line no-undef, new-cap
    this.chartInstance = new echarts.init(this.$refs.chartDom);
    const res = {
      code: 200,
      success: true,
      data: [
        {
          level: 'normal',
          levelName: '已完成',
          num: '1226'
        },
        {
          level: 'urgent',
          levelName: '已暂停',
          num: '1047'
        },
        {
          level: 'big',
          levelName: '未评价',
          num: '900'
        }
      ],
      msg: '操作成功'
    };
    this.trendData = res.data || [];
    this.initOptions();
  },
  methods: {
    initOptions() {
      let myData3 = ['11-14', '11-15', '11-16', '11-17', '11-18', '11-19', '11-20'];
      let numA = [350, 250, 320, 420, 380, 180, 280];
      let option = {
        tooltip: {
          show: true,
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            textStyle: {
              color: '#fff'
            }
          },
          textStyle: {
            color: '#fff'
          },
          backgroundColor: 'rgba(16, 123, 184, .52)', //设置背景颜色
          confine: true
        },
        grid: {
          left: px(10),
          right: '5%',
          top: px(20),
          bottom: 5,
          containLabel: true
        },
        legend: {
          top: '0%',
          y: 'center',
          itemWidth: px(8),
          itemHeight: px(4),
          itemGap: px(20),
          show: false,
          textStyle: {
            fontSize: px(12),
            color: '#fff',
            padding: [0, 0, 0, px(6)]
          }
        },
        xAxis: [
          {
            type: 'category',
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitArea: {
              show: false
            },
            axisLabel: {
              interval: 0,
              fontSize: px(12)
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: '#ffffff'
              }
            },
            data: myData3
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '',
            splitNumber: 4,
            nameGap: px(5),
            nameTextStyle: {
              color: '#fff',
              fontSize: px(12),
              align: 'center',
              padding: [0, px(20), px(5), 0]
            },
            axisLabel: {
              formatter: '{value}',
              color: 'rgba(95, 187, 235, 1)',
              textStyle: {
                fontSize: px(14),
                color: '#fff',
                lineHeight: px(14)
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: 'rgba(28, 130, 197, .3)',
                type: 'dashed'
              }
            }
          }
        ],
        series: [
          {
            name: '销量',
            type: 'bar',
            stack: '总量',
            barMaxWidth: px(10),
            barGap: '10%',
            itemStyle: {
              normal: {
                show: true,
                // eslint-disable-next-line no-undef
                color: new echarts.graphic.LinearGradient(
                  0,
                  1,
                  0,
                  0,
                  [
                    {
                      offset: 0,
                      color: 'rgba(28, 248, 252, 1)'
                    },
                    {
                      offset: 0.5,
                      color: 'rgba(80, 145, 250, 1)'
                    },
                    {
                      offset: 1,
                      color: 'rgba(106, 95, 249, 1)'
                    }
                  ],
                  false
                ),
                barBorderRadius: 0,
                label: {
                  show: false,
                  position: 'top',
                  color: '#56C1F8',
                  formatter: function(p) {
                    return p.value > 0 ? p.value : '';
                  }
                }
              }
            },
            data: numA
          }
        ]
      };
      this.chartInstance.setOption(option);
    }
  }
};
</script>
<style lang="scss" scoped>
.pieview {
  display: flex;
  flex-direction: column;
  .echars {
    flex: auto;
    overflow: hidden;
  }
  p {
    display: flex;
    align-items: center;
    font-size: px(16);
    &::before {
      width: px(9);
      height: px(18);
      display: inline-block;
      content: ' ';
      background: url('~@/assets/image/arrow.png') no-repeat center;
      background-size: cover;
      margin-right: px(8);
    }
  }
}
</style>
